<!-- 商品展示组件 -->
<template>
  <!-- 查看相对应的商品详情 -->
  <!-- 给该商品详情页面传递一个该商品fid -->
  <div
    class="food-item"
    @click="$router.push({ name: 'FoodDetail', query: { fid: f_item.id } })"
  >
    <!-- 左边的照片 -->
    <div class="left-img">
      <!-- 插槽将传过来的图片展示 -->
      <slot>
        <!-- v-lazy 图片预加载 先阻止事件冒泡,点击事件查看图片预览 -->
        <img v-lazy="f_item.food_img" @click.stop="showThisImage" />
      </slot>
    </div>
    <!-- 右边的文字 -->
    <!-- 给每个ul一个长按 -->
    <ul class="right-text" v-longpress="showActionSheet">
      <li class="food-name">
        {{ f_item.food_name }}
      </li>
      <li class="sale-count">月售:{{ f_item.saleCount }}</li>
      <li class="price">价格:{{ f_item.price }}</li>
    </ul>
  </div>
</template>

<script>
//ImagePreview图片预览插件
import { ImagePreview } from "vant";
//导入仓库
import store from "@/store";
//导入路由
import router from "@/router";
export default {
  name: "FoodItem",
  components: {
    ImagePreview,
  },
  // 拿到父组件传过来的对象，做照片的渲染
  props: {
    f_item: {
      type: Object,
      required: true,
    },
  },
  setup(props, context) {
    //点击图片预览
    function showThisImage() {
      // 使用图片预览方法，相对应的图片
      ImagePreview({
        images: [props.f_item.food_img],
        closeable: true,
      });
    }
    //长按拉起sheet
    function showActionSheet() {
      store.commit("showActionSheet", {
        //设置sheet的配置（参数）
        list: ["给钱西内", "小垃圾", "拉黑"],
        success: function (index) {
          if (index == 0) {
            //当选中当前的选项卡时调用方法
            console.log("给钱西内");
          } else if (index == 1) {
            console.log("小垃圾");
          } else if (index == 2) {
            router.push({ name: "user" });
          }
        },
      });
    }
    return {
      showActionSheet,
      showThisImage,
    };
  },
};
</script>

<style lang="scss" scoped>
.food-item {
  display: flex;
  height: 90px;
  border-bottom: 1px solid lightcyan;
  box-sizing: border-box;
  padding: 2px 5px;
  .left-img {
    width: 110px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .right-text {
    flex: 1;
    font-size: 12px;
    margin-left: 5px;
    @include flexbox(column, space-between);
    .food-name {
      font-weight: bold;
      font-size: 20px;
    }
    .sale-count {
      font-size: 14px;
      color: rgb(240, 75, 75);
    }
  }
}
</style>
